<template>
  <div class="login">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      label-position="left"
    >
      <h2 style="text-align: center">登录</h2>
      <el-form-item label="账号" prop="ZhangHao">
        <el-input v-model="ruleForm.ZhangHao" placeholder="请输入账号" />
      </el-form-item>

      <el-form-item label="密码" prop="MiMa">
        <el-input v-model="ruleForm.MiMa" placeholder="请输入密码" />
      </el-form-item>
      <div>
        <el-button type="info" @click="$router.push({ name: 'Index' })"
          >返回主页</el-button
        >
        <el-button type="info" @click="$router.push({ name: 'Text' })"
          >返回测试页面</el-button
        >
        <el-button type="warning" @click="resetForm(ruleFormRef)"
          >重置</el-button
        >
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {  reactive, ref } from "vue";
import axios from "axios";
import {
  type ComponentSize,
  type FormInstance,
  type FormRules,
  ElMessage,
} from "element-plus";
import { useRouter, type RouteRecordRaw } from "vue-router";

const router = useRouter();
interface RuleForm {
  ZhangHao: string;
  MiMa: string;
}

const ruleFormRef = ref<FormInstance>();
const formSize = ref<ComponentSize>("default");
const ruleForm = reactive<RuleForm>({
  ZhangHao: "",
  MiMa: "",
});
// 登录表单验证
const rules = reactive<FormRules<RuleForm>>({
  ZhangHao: [
    { required: true, message: "请输入你的账号", trigger: "blur" },
    { min: 3, max: 9, message: "长度3位-9位", trigger: "blur" },
  ],
  MiMa: [
    { required: true, message: "请输入你的密码", trigger: "blur" },
    { min: 6, max: 9, message: "长度6位-9位", trigger: "blur" },
  ],
});
let routeInfo: RouteRecordRaw[] = [];
// 登录事件
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      ElMessage({
        message: "可以提交!",
        type: "success",
      });
      localStorage.setItem("token", ruleForm.ZhangHao);
      const result = await axios.get("http://localhost:3333/login", {
        params: {
          user: ruleForm.ZhangHao,
          password: ruleForm.MiMa,
        },
      });
      if (result.data.code == 200) {
        result.data.route.forEach((v: RouteRecordRaw) => {
          router.addRoute({
            path: v.path,
            name: v.name,
            component: () => import(`@/views/${v.component}.vue`),
          });
        });
        router.push({ name: "Text" });
        console.log(router.getRoutes());
      }
    } else {
      ElMessage({
        message: "提交失败!",
        type: "error",
      });
      console.log("", fields);
    }
  });
};
// 重置事件
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  background-image: linear-gradient(
    to right bottom,
    rgba(160, 129, 129, 0.901),
    rgb(49, 180, 23)
  );
  display: flex;
  justify-content: center;
  align-items: center;
  .demo-ruleForm {
    background-color: white;
    max-width: 600px;
    min-width: 350px;
    border: 1px solid gray;
    border-radius: 20px;
    padding: 20px;
  }
  ::v-deep(.el-form-item__content) {
    justify-content: space-around;
  }
}
</style>
